<template>
    <div>
      <router-link to="/home">首页</router-link>
      <router-link :to="{path:'/home'}">首页</router-link>
      <router-link :to="{name:'Home'}">首页</router-link>
      <router-link to="/about"  activeClass='aaa'>about页</router-link>
      <!-- <h1> -->
        <router-view></router-view>
      <!-- </h1> -->
    </div>
</template>
<script>
// @ is an alias to /src
/* 
  router-view 是router提供的一个全局组件；是用来展示 对应的组件的；
  router-link 页是router提供的一个全局组件；是用来 提供 按钮的
               to属性 使用指定 跳转路径的

  当页面路径对应上 某个 router-link时； 会发现有一个 router-link-exact-active router-link-active              
  router-link-exact-active 有这个类名 当前页面的路径跟这个 link对应的to属性一摸一样
  router-link-active  有这个类名 当前页面的路径 中 包含 link对应的属性
*/
export default {
    name: 'XXX',
    data() {
        return {
        
        }
    },
    components: {
        
    }
}
</script>
<style lang="less">
  .router-link-active{
    color:blue
  }
  .current{
    color:blue
  }
</style>